<template>
  <div class="header-container">
    <nav-bar
      title="登录"
      :showLeftArrow="true"
      :leftText="'返回'"
      @click-left="back"
    />
  </div>
  <div class="main-container">
    <van-row justify="center">
      <van-image width="100" height="100" src="/img/logo.png" />
    </van-row>
    <van-form @submit="handleSubmit">
      <van-cell-group inset>
        <van-field
          v-model="entity.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="entity.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          center
          clearable
          label="验证码"
          placeholder="输入验证码"
          v-model="entity.verifyCode"
        >
          <template #button>
            <van-image
              width="100"
              height="30"
              :src="verifyCodeUrl"
              @click="getVerifyCode"
            />
          </template>
        </van-field>
      </van-cell-group>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录账号
        </van-button>
      </div>
      <div style="margin: 16px">
        <van-button round block @click="register"> 立即注册 </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts">
import UmsLoginParam from "@/entity/UmsLoginParam";
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import authService from "@/services/auth.service";
import { useStore } from "vuex";
import { AUTHENTICATE } from "@/store";
import { AxiosError } from "axios";
import { Toast } from "vant";
import NavBar from "@/components/NavBar.vue";

type StateType = {
  verifyCodeUrl: string;
  entity: UmsLoginParam;
};

export default defineComponent({
  components: {
    NavBar,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive<StateType>({
      verifyCodeUrl: "",
      entity: new UmsLoginParam(),
    });

    onMounted(() => {
      getVerifyCode();
    });

    const getVerifyCode = () => {
      state.verifyCodeUrl = authService.getVerifyCodeUrl();
    };

    const handleSubmit = async () => {
      try {
        const tokenInfo = await authService.login(state.entity);
        store.commit(AUTHENTICATE, tokenInfo);
        router.push("/");
      } catch (e) {
        console.error(e);
        getVerifyCode();
        if (e instanceof AxiosError) {
          Toast.fail(e.response?.data.message || "登录失败");
        }
        throw e;
      } finally {
      }
    };

    const register = () => {
      router.push("/register");
    };

    const back = () => {
      router.go(-2);
    };

    return {
      ...toRefs(state),
      handleSubmit,
      register,
      back,
      getVerifyCode,
    };
  },
});
</script>
